<template>
  <div>
    <div class="top-bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: current_path.url }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{current_path.title}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="module-name">
        <span>{{current_path.title}}</span>

        <div class="reload" @click="reloadPage" v-if="isEdit||isAdd"><span>返回列表</span> <img :src="back_list"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import back_list from 'assets/icons/back_list.svg'

  export default {
    name: "breadCrumb",
    props: {
      current_path: {
        type: Object,
        default: () => {
          return {
            url: '/',
            title: '信息'
          }
        }
      },
      isEdit: {
        type: Boolean,
        default: false
      },
      isAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        back_list: back_list,
      }
    },
    methods: {
      ...mapMutations('filter', [
        'SetIsEdit', 'SetIsAdd'
      ]),
      //返回列表
      reloadPage() {
        this.SetIsEdit(false);
        this.SetIsAdd(false);

      }
    }
  }

</script>

<style lang="scss">
  /*面包导航*/
  .top-bread {
    padding: 11px 0 24px 31px;
    background-color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.098) 0 1px 2px 0;
  }

  .common-reload {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .module-name {
    @extend .common-reload;
    margin-top: 18px;


    span {
      font-size: 18px;
      color: #666666;
    }

    .reload {
      cursor: pointer;
      margin-left: 16px;
      @extend .common-reload;

      span {
        font-size: 12px;
        color: #999999;
      }

      img {
        width: 18px;
        height: 18px;
      }
    }
  }

</style>
